概念

在一個 container 中如果有三個元素，要讓元素之間有間距，很多種方式，例如：

1. HTML

• <br> 空行，就像在文件中按下 Enter 的效果
• <hr> 水平線

除了使用以上元素外，HTML 有一些保留字代表特殊字元，例如：

• ©：代表 ©
•  ：代表不斷行的空白

2. Margin

在 box 外圍增加間距，使用 margin 屬性，例如：margin: 20px

Margin collapse

<article>
  <h1>My heading with teal margin</h1>
  <p>A paragraph of text that has blue margin on it, following the heading with margin.</p>
</article>

h1 {
    margin-bottom: 100px;
}

p {
    margin-top: 300px;
}

最終兩者的間距會是 300px 不會是 400px，也就是 vertical margin collapses。Margin collapse 機制會在垂直相鄰的兩個元素找出最大的間距值做套用，而不是做相加，只有 block margin 會 collapse，inline 沒有！

＊Collapse 主要是想避免在兩個元素之間產生過大的間距。

如果確定不想要 Collapse 機制，可以使用 position: absolute 或是 float。

3. Padding

在 box 內部增加間距

4. Positioning

如果 position 有設定 static 以外的值，例如：relative、absolute、fixed、sticky，可以使用 top、right、bottom、left，控制元素的位置來產生間距。

5. Grid & flexbox

在 grid 和 flexbox 的排版中，都可以使用 gap 這個屬性來替子元素增加彼此之間的間距。gap 為 row-gap 和 column-gap的簡寫

如果想要讓介面的間距保有一致性，可以透過宣告變數，統一做管理，例如：

:root {
  --gutter: 20px;
  --spacing: 1em;
}

h1 {
  margin-left: var(--gutter);
  margin-top: var(--spacing);
}